<template>
  <div class="news-detail">
    <h1 class="news-title">{{ newsDetail.title }}</h1>
    <div class="news-meta">
      <span>发布时间：{{ newsDetail.date }}</span>
      <span>来源：{{ newsDetail.source }}</span>
      <span>阅读量：{{ newsDetail.views }}</span>
    </div>
    
    <div class="news-image">
      <el-image :src="newsDetail.image" fit="cover" style="width: 100%; border-radius: 8px;"></el-image>
    </div>
    
    <div class="news-content" v-html="newsDetail.content"></div>
    
    <el-button type="primary" icon="el-icon-arrow-left" @click="goBack" class="back-link">返回新闻列表</el-button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

export default {
  name: 'NewsDetail',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const newsId = route.params.id
    
    const newsDetail = ref({
      title: '',
      date: '',
      source: '',
      views: '',
      image: '',
      content: ''
    })
    
    const newsData = {
      '1': {
        title: '国家卫健委发布最新疫情防控指南',
        date: '2023-10-15',
        source: '国家卫健委',
        views: '12,568',
        image: 'https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80',
        content: `
          <p>国家卫生健康委员会近日发布了最新版新冠肺炎疫情防控指南，针对秋冬季可能出现的疫情反弹提出了更加细致的防控措施。该指南是在总结前期疫情防控经验基础上，结合当前疫情形势和病毒变异特点制定的。</p>
          
          <h3>重点防控措施</h3>
          <p>新版指南强调了对重点场所、重点人群的防控要求。在医疗机构、养老机构、社会福利机构等重点场所，要求严格落实入口管理、健康监测、环境消毒等措施。对于老年人、慢性病患者、孕妇等重点人群，提出了更有针对性的防护建议。</p>
          
          <p>指南特别指出，医疗机构应当强化预检分诊和发热门诊管理，严格执行"一人一诊一室"制度，防止交叉感染。同时要求各级医疗机构做好医疗物资储备，确保能够应对可能出现的疫情波动。</p>
          
          <h3>个人防护建议</h3>
          <p>对于普通公众，指南建议在以下情况佩戴口罩：乘坐公共交通工具时，进入人员密集的室内公共场所时，出现发热、咳嗽等呼吸道症状时，以及就医时。同时强调保持手卫生、注意咳嗽礼仪、保持社交距离等基本防护措施的重要性。</p>
          
          <p>针对秋冬季呼吸道疾病高发特点，指南建议老年人、慢性病患者、医务人员等重点人群接种流感疫苗和新冠疫苗，以降低合并感染风险。</p>
          
          <h3>应急处置机制</h3>
          <p>新版指南完善了疫情监测预警和应急处置机制。要求各地建立健全多渠道监测预警机制，提高疫情早发现能力。一旦发现疫情，要按照"早、快、准"原则，迅速开展流调溯源、风险区域划定、核酸检测等工作。</p>
          
          <p>国家卫健委相关负责人表示，将根据疫情形势变化和防控工作需要，动态调整防控措施，统筹推进疫情防控和经济社会发展。</p>
        `
      },
      '2': {
        title: '人工智能助力医疗诊断准确率提升30%',
        date: '2023-10-12',
        source: '科技日报',
        views: '18,732',
        image: 'https://images.unsplash.com/photo-1581056771107-24ca5f033842?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80',
        content: `
          <p>最新研究表明，人工智能辅助诊断系统在多种疾病的早期筛查中表现出色，特别是在影像诊断领域，准确率比传统方法提高了30%。这项由清华大学医学院联合多家医院开展的研究成果已在《自然·医学》杂志上发表。</p>
          
          <h3>AI在医疗影像诊断中的应用</h3>
          <p>研究团队开发的AI系统能够分析CT、MRI、X光等多种医学影像，在肺癌、乳腺癌、糖尿病视网膜病变等疾病的诊断中表现出色。系统通过深度学习数百万例医学影像和对应的诊断结果，建立了高度精确的诊断模型。</p>
          
          <p>在临床试验中，AI系统对肺结节良恶性判断的准确率达到94.5%，比资深放射科医生的平均水平高出12个百分点。在乳腺癌筛查中，AI系统的假阴性率比传统方法降低了27%。</p>
          
          <h3>AI辅助诊断的工作流程</h3>
          <p>在实际应用中，AI系统作为医生的"第二双眼睛"工作：首先由AI对医学影像进行初步分析，标记出可疑病灶并给出诊断建议；然后由医生复核AI的标记和建议，结合临床经验做出最终诊断。</p>
          
          <p>这种"AI+医生"的合作模式不仅能提高诊断准确率，还能显著提升工作效率。数据显示，使用AI辅助后，放射科医生解读一套胸部CT的时间从15分钟缩短到8分钟。</p>
          
          <h3>未来发展方向</h3>
          <p>研究团队表示，下一步将重点提升AI系统在多病种联合诊断和罕见病识别方面的能力。同时，他们正在开发能够解释诊断依据的"可解释AI"，帮助医生理解AI做出判断的逻辑过程。</p>
          
          <p>专家指出，AI不会取代医生，而是成为医生的强大工具。未来，AI有望在疾病预防、早期筛查、精准治疗等多个环节发挥更大作用，最终造福广大患者。</p>
        `
      },
      'hot-1': {
        title: '医保新政策：这些药品纳入报销范围',
        date: '2023-10-10',
        source: '国家医保局',
        views: '52,000',
        image: 'https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80',
        content: `
          <p>国家医疗保障局近日发布了2023年国家医保药品目录调整结果，新增111种药品进入医保报销范围，其中包括多种抗癌药、罕见病药和慢性病用药。这是国家医保局成立以来连续第六年进行医保药品目录调整。</p>
          
          <h3>新增药品特点</h3>
          <p>本次调整新增的111种药品中，包括23种抗癌药、15种罕见病用药、22种慢性病用药和51种其他药品。这些药品平均降价60.1%，预计未来两年可为患者减负超过400亿元。</p>
          
          <p>特别值得关注的是，本次调整将多种高价罕见病用药纳入医保，如治疗脊髓性肌萎缩症的诺西那生钠注射液，经过谈判后价格从每支70万元降至3.3万元左右，降幅达95%。</p>
          
          <h3>调整后的报销政策</h3>
          <p>新版医保目录将于2024年1月1日起正式实施。参保患者在定点医疗机构使用目录内药品，可按当地医保政策享受报销待遇。其中甲类药品按100%比例报销，乙类药品由各地根据基金承受能力确定报销比例。</p>
          
          <p>国家医保局要求各地医保部门做好信息系统调整、医疗机构培训等工作，确保新增药品及时落地，让患者尽早受益。</p>
          
          <h3>查询方式</h3>
          <p>参保人员可通过以下方式查询药品是否在医保目录内：</p>
          <p>1. 登录国家医保服务平台网站或APP查询</p>
          <p>2. 咨询当地医保经办机构</p>
          <p>3. 向定点医疗机构医保办咨询</p>
        `
      }
    }
    
    onMounted(() => {
      if (newsData[newsId]) {
        newsDetail.value = newsData[newsId]
      } else {
        // 默认数据
        newsDetail.value = {
          title: '新闻详情',
          date: '2023-10-01',
          source: '系统',
          views: '0',
          image: 'https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80',
          content: '<p>新闻内容加载中...</p>'
        }
      }
    })
    
    const goBack = () => {
      router.push('/news')
    }
    
    return {
      newsDetail,
      goBack
    }
  }
}
</script>

<style scoped>
.news-detail {
  background-color: white;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.news-title {
  font-size: 28px;
  margin-bottom: 20px;
  color: #333;
  text-align: center;
}

.news-meta {
  display: flex;
  justify-content: center;
  color: #999;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.news-meta span {
  margin: 0 15px;
}

.news-image {
  margin-bottom: 30px;
  text-align: center;
}

.news-content {
  font-size: 16px;
  line-height: 1.8;
}

.news-content p {
  margin-bottom: 20px;
  text-indent: 2em;
}

.news-content h3 {
  margin: 30px 0 15px;
  color: #42b983;
}

.back-link {
  display: inline-block;
  margin-top: 30px;
}

@media (max-width: 768px) {
  .news-meta {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  
  .news-meta span {
    margin: 0;
  }
}
</style>